<template>
    <div class="container">
        <!-- 轮播图 -->
        <div class="slides">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" @change="onChange">
                <van-swipe-item><img :src="img1" alt=""></van-swipe-item>
                <van-swipe-item><img :src="img2" alt=""></van-swipe-item>
                <van-swipe-item><img :src="img1" alt=""></van-swipe-item>
                <van-swipe-item><img :src="img2" alt=""></van-swipe-item>
                <template #indicator>
                    <div class="indeicator">
                        <ul>
                            <li :class="{ 'con': indexSiper == 0 }"></li>
                            <li :class="{ 'con': indexSiper == 1 }"></li>
                            <li :class="{ 'con': indexSiper == 2 }"></li>
                            <li :class="{ 'con': indexSiper == 3 }"></li>
                        </ul>
                    </div>
                </template>
            </van-swipe>
        </div>

        <div class="mains">
            <div class="code">
                <ul>
                    <router-link to="/CommodityView" tag="li">
                        <li>
                            <div class="img"><img src="../assets/img/shop.png" alt=""></div>
                            <p>游戏</p>
                        </li>
                    </router-link>

                    <router-link to="/CommodityView" tag="li">
                        <li>
                            <div class="img"><img src="../assets/img/shop.png" alt=""></div>
                            <p>潮玩</p>
                        </li>
                    </router-link>
                    <router-link to="/CommodityView" tag="li">
                        <li>
                            <div class="img"><img src="../assets/img/shop.png" alt=""></div>
                            <p>动漫周边</p>
                        </li>
                    </router-link>
                    <router-link to="/CommodityView" tag="li">
                        <li>
                            <div class="img"><img src="../assets/img/shop.png" alt=""></div>
                            <p>图书</p>
                        </li>
                    </router-link>
                    <router-link to="/CommodityView" tag="li">
                        <li>
                            <div class="img"><img src="../assets/img/shop.png" alt=""></div>
                            <p>店铺</p>
                        </li>
                    </router-link>
                </ul>
            </div>

            <div class="bigImg">
                <div class="left"><img src="../assets/img/shop1.jpg" alt=""></div>
                <div class="left"><img src="../assets/img/shop2.png" alt=""></div>
            </div>

            <van-list v-model="loading" :finished="finished" finished-text="我也是有底线的！" @load="onLoad">
                <div class="shopList">
                    <router-link to="/CommodityView" tag="div" class="left" v-for="(item, index) in list" :key="index">
                        <div class="img"><img :src="item.imgs" alt=""></div>
                        <div class="text">
                            {{ item.title }}
                        </div>
                        <div class="price">￥{{ item.price1 }} <s>￥{{ item.price2 }}</s></div>
                        <div class="pro">{{ item.pro }}人想要</div>
                    </router-link>
                </div>
            </van-list>


        </div>



    </div>
</template>

<script>
export default {
    data() {
        return {
            indexSiper: 0,

            loading: false,
            finished: false,

            // 轮播图
            img1: require('../assets/img/slide.jpg'),
            img2: require('../assets/img/slide2.jpg'),
            list: [
                {
                    id: 1,
                    imgs: require('../assets/img/shop03.jpg'),
                    title: '【摩点独家亲签版】密码游戏 知乎年度黑马作家高级鱼重磅新作，田浩、安迪斯晨风、主播老道联袂推荐，打动不同领域悬疑作品爱好0',
                    price1: '34',
                    price2: '0',
                    pro: '624'
                },
                {
                    id: 2,
                    imgs: require('../assets/img/shop03.jpg'),
                    title: '【摩点独家亲签版】密码游戏 知乎年度黑马作家高级鱼重磅新作，田浩、安迪斯晨风、主播老道联袂推荐，打动不同领域悬疑作品爱好0',
                    price1: '34',
                    price2: '0',
                    pro: '624'
                },
                {
                    id: 3,
                    imgs: require('../assets/img/shop03.jpg'),
                    title: '【摩点独家亲签版】密码游戏 知乎年度黑马作家高级鱼重磅新作，田浩、安迪斯晨风、主播老道联袂推荐，打动不同领域悬疑作品爱好0',
                    price1: '34',
                    price2: '0',
                    pro: '624'
                },
                {
                    id: 4,
                    imgs: require('../assets/img/shop03.jpg'),
                    title: '【摩点独家亲签版】密码游戏 知乎年度黑马作家高级鱼重磅新作，田浩、安迪斯晨风、主播老道联袂推荐，打动不同领域悬疑作品爱好0',
                    price1: '34',
                    price2: '0',
                    pro: '624'
                },
                {
                    id: 5,
                    imgs: require('../assets/img/shop03.jpg'),
                    title: '【摩点独家亲签版】密码游戏 知乎年度黑马作家高级鱼重磅新作，田浩、安迪斯晨风、主播老道联袂推荐，打动不同领域悬疑作品爱好0',
                    price1: '34',
                    price2: '0',
                    pro: '624'
                },
                {
                    id: 6,
                    imgs: require('../assets/img/shop03.jpg'),
                    title: '【摩点独家亲签版】密码游戏 知乎年度黑马作家高级鱼重磅新作，田浩、安迪斯晨风、主播老道联袂推荐，打动不同领域悬疑作品爱好0',
                    price1: '34',
                    price2: '0',
                    pro: '624'
                },
                {
                    id: 7,
                    imgs: require('../assets/img/shop03.jpg'),
                    title: '【摩点独家亲签版】密码游戏 知乎年度黑马作家高级鱼重磅新作，田浩、安迪斯晨风、主播老道联袂推荐，打动不同领域悬疑作品爱好0',
                    price1: '34',
                    price2: '0',
                    pro: '624'
                },
                {
                    id: 8,
                    imgs: require('../assets/img/shop03.jpg'),
                    title: '【摩点独家亲签版】密码游戏 知乎年度黑马作家高级鱼重磅新作，田浩、安迪斯晨风、主播老道联袂推荐，打动不同领域悬疑作品爱好0',
                    price1: '34',
                    price2: '0',
                    pro: '624'
                },
                {
                    id: 9,
                    imgs: require('../assets/img/shop03.jpg'),
                    title: '【摩点独家亲签版】密码游戏 知乎年度黑马作家高级鱼重磅新作，田浩、安迪斯晨风、主播老道联袂推荐，打动不同领域悬疑作品爱好0',
                    price1: '34',
                    price2: '0',
                    pro: '624'
                },
                {
                    id: 10,
                    imgs: require('../assets/img/shop03.jpg'),
                    title: '【摩点独家亲签版】密码游戏 知乎年度黑马作家高级鱼重磅新作，田浩、安迪斯晨风、主播老道联袂推荐，打动不同领域悬疑作品爱好0',
                    price1: '34',
                    price2: '0',
                    pro: '624'
                },
            ]
        };
    },
    methods: {
        onChange(index) {
            this.indexSiper = index;
        },

        onLoad() {
            setTimeout(() => {
                for (let i = 0; i < 10; i++) {
                    this.list.push({
                        id: this.list.length + 1,
                        imgs: require('../assets/img/shop03.jpg'),
                        title: '【摩点独家亲签版】密码游戏 知乎年度黑马作家高级鱼重磅新作，田浩、安迪斯晨风、主播老道联袂推荐，打动不同领域悬疑作品爱好0',
                        price1: '34',
                        price2: '0',
                        pro: '624'
                    });
                }

                // 加载状态结束
                this.loading = false;

                // 数据全部加载完成
                if (this.list.length >= 40) {
                    this.finished = true;
                    console.log(this);
                }
            }, 1000);
        },

    }
}
</script>

<style lang="scss">
.slides {
    .indeicator {
        width: 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-40px);
        bottom: 0;

        ul {
            display: inline-block;
            margin: 0 auto;

            li {
                display: inline-block;
                width: 4px;
                height: 4px;
                margin: 0 5px;
                background-color: rgba(225, 225, 225, 0.5);

                &.con {
                    background-color: #fff;

                }

            }
        }
    }
}

.mains {
    background-color: #f2f2f2;
    padding-top: 9px;

    .code {

        width: 355px;
        height: 94px;
        border-radius: 4px;
        margin: 0 auto;
        background-color: #Fff;

        ul {
            width: 100%;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: space-around;

            li {
                display: flex;
                flex-direction: column;
                align-items: center;

                .img {
                    width: 42px;
                    height: 42px;
                }

                p {
                    margin-top: 15px;
                    font-size: 12px;
                    color: #7f7f7f;
                    font-weight: 400;
                }
            }
        }
    }

    .bigImg {
        margin: 10px 0px;
        display: flex;
        justify-content: space-around;

        .left {
            width: 175px;
            height: 100px;
        }
    }

    .shopList {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;

        .left {
            width: 177px;
            height: 309px;
        }

        .text {
            font-size: 14px;
            margin: 0 0 33px;
            color: #1a1a1a;
            height: 36px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .price {
            font-size: 18px;
            color: #ff3d20;
            font-weight: bolder;

            s {
                font-size: 12px;
                color: #b1b1b1;
                font-weight: 400;

            }
        }

        .pro {
            margin-top: 14px;
            font-size: 12px;
            font-weight: 400;
            color: #1a1a1a;
        }
    }
}
</style>